<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加商品</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
    <script charset="utf-8" src="/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="/kindeditor/lang/zh_CN.js"></script>
    <script src="/vue/jquery-3.3.1.min.js"></script>

    <!--<base href="<%=basePath%>/resources/">-->
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>


    <script>
        /*富文本编辑器*/
        var editor;
        KindEditor.ready(function(K) {
            editor = K.create('textarea[name="description"]', {
                uploadJson : '/product/kindLoad',
                allowFileManager : true,
                allowImageUpload: true, //多图上传
                allowFileManager : true, //浏览图片空
                filterMode : false, //HTML特殊代码过滤
                afterBlur: function(){ this.sync(); }, //编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）
            });
            prettyPrint();

        });


        function addCatetoryOption(pid,level){
            $.ajax({
                //请求的url
                url: "/productCategory/findCategoryByPid/"+pid,
                //请求的参数
                data: null,
                //请求的方式
                type: "get",
                //预期的返回类型
                dataType: "json",
                //
                success: function (data) {
                    var options="<option value=''>选择分类</option>";
                    if (data.status==200){
                        var catetoryList=data.obj;
                        for (let i = 0; i < catetoryList.length; i++) {
                            var catetory=catetoryList[i];
                            options+="<option value='"+catetory.id+"'>"+catetory.name+"</option>";
                        }
                    }
                    if (level=="1"){ $("#categorylevel1id").html(options)}
                    if (level=="2"){ $("#categorylevel2id").html(options)}
                    if (level=="3"){ $("#categorylevel3id").html(options)}

                }
            })
        }
        window.onload=addCatetoryOption(0,1);

        layui.use(['upload'],function(){
            var upload = layui.upload,
                $=layui.$;
            upload.render({
                elem: '#test2'
                ,url: '/product/layuiload'
                ,multiple: true
                ,accept:'images'
                ,exts:'jpg|png|gif|bmp|jpeg'
                ,size:2048
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo2').append('<img width="80px" src="'
                            + result +'" alt="'+ file.name
                            +'" class="layui-upload-img upload-img">');
                    });
                }
                ,done: function(res){
                    $("#saveform").append("<input type='hidden' name='imgs' value='"
                        +res.imgurl+"'>");
                }
            });
        })


    </script>
</head>

<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">表单</a></li>
    </ul>
    </div>
    
    <div class="formbody">
    
    <div class="formtitle"><span>基本信息</span></div>
        <form action="/product/addProduct" method="post" id="saveform" enctype="multipart/form-data">
            <ul class="forminfo">
                <li><label>商品名称</label><input name="name" type="text" class="dfinput" /></li>
                <li><label>单价</label><cite><input name="price" type="text" class="dfinput"/></cite></li>
                <li><label>商品类别</label>
                    <select id="categorylevel1id" name="categorylevel1id" class="dfinput" onchange="addCatetoryOption(this.value,2)">
                        <option>一级分类</option>
                    </select>
                    <select id="categorylevel2id" name="categorylevel2id" class="dfinput" onchange="addCatetoryOption(this.value,3)">
                        <option>二级分类</option>
                    </select>
                    <select id="categorylevel3id" name="categorylevel3id" class="dfinput">
                        <option>三级分类</option>
                    </select>
                </li>

                <li><label>商品数量</label><input name="stock" type="text" class="dfinput" /></li>
                <li><label>商品图片</label><input name="proimg" type="file" class="dfinput" /></li>
                <li><label>商品描述</label><textarea style="width: 800px;height: 400px;visibility: hidden" name="description" cols="" rows="" class="textinput"></textarea></li>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2" >图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm"	style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>

                <li><label>&nbsp;</label><input name="" type="submit" class="btn" value="确认保存"/></li>
            </ul>
        </form>
    </div>
</body>
</html>

